<template>
  <div id="app">
    <div class="wrap">
      <!-- 播放主体 -->
      <div class="play_wrap" id="player">
        <div class="search_bar">
          <!-- <img src="./assets/img" alt /> -->
          <!-- 搜索歌曲 -->
          <input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic" />
        </div>
        <div class="center_con">
          <!--搜索歌曲列表 -->
          <div class="sonng_wrapper">
            <div class="song_list">
              <ul>
                <li v-for="(item, index) in musicList" :key="index">
                  <!-- <a href="javascript:;" @click="playMusic(item.id)"></a> -->
                  <b>{{ item.name }}</b>
                  <!-- <span v-if="item.mvid != 0" @click="playMV(item.mvid)">
                    <i></i>
                  </span>-->
                </li>
              </ul>
              <!-- <img src="./assets/img/" alt /> -->
              <!-- 黑胶碟片 -->
              <!-- <img src="./assets/img" alt /> -->
              <img :src="musicCover" class="cover autoRotate" alt />
            </div>
            <!-- 评论容器 -->
            <div class="comment_wrapper">
              <!-- <h5 class="title">热门留言</h5>
              <div class="comment_list">
                <dl v-if="(item, index) in hotComments" :key="index">
                  <dt>
                    <img :src="item.user.avatarUrl" alt />
                  </dt>
                  <dd class="name">{{ item.nickname }}</dd>
                  <dd class="datail">{{ item.content }}</dd>
                </dl>
              </div>-->
              <!-- <img src="./assets/img" alt /> -->
            </div>
          </div>
          <!-- <div class="audio_con">
            <audio
              ref="audio"
              @play="play"
              @pause="pause"
              :src="musicUrl"
              controls="controls"
            ></audio>
          </div>
          <div class="video_con" v-show="isShow" style="display:none">
            <video :src="mvUrl" controls="controls"></video>
            <div class="mask" @click="hide"></div>
          </div>-->
        </div>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
import axios from "axios";
import { reacive, toRefs } from "@vue/composition-api";
export default {
  data() {
    return {
      musicCover: "",
      hotComments: [],
      audio: "",
      musicUrl: "",
      mvUrl: ""
    };
  },
  methods: {
    playMusic(id) {},
    playMV() {},
    play() {},
    pause() {},
    hide() {}
  },

  //vue3.0核心方法
  // setup(){}，特点：
  // 1.自动执行---》在created方法之前调用执行
  // 2.作用，为当前页面提供数据或者方法
  // 3.提供数据方法--合并到组件的data中
  // 4.形参，props,context
  // 5.返回值 return{数据的名字和值}
  // setup(props, context) {},
  setup() {
    // 写响应式数据,reacive方法提供你那个的数据是响应式的 数据，相当于data
    const state = reacive({ query: "", musicList: [] }); // state-->{query:''}

    // 方法
    // 搜索音乐
    const searchMusic = async () => {
      // const {data}  = await axios.get(`https://autumnfish.cn/song/url?id=${musicId}`)
      const { data } = await axios.get(
        `https://autumnfish.cn/search?keywords=${state.query}`
      );
      state.musicList = data.result.songs;
    };
    const methods = { searchMusic };
    return {
      // query: state.query,
      // 装换数据toRefs()
      // ...state,
      ...toRefs(state),
      ...methods
    };
  }
};
</script>

<style lang="scss"></style>
